<template>
	<view v-if="show" class="mask" @click="toggleMask" @touchmove.stop.prevent="stopPrevent" :style="{ backgroundColor: backgroundColor }">
		<view
			class="mask-content"
			@click.stop.prevent="stopPrevent"
			:style="[
				{
					transform: transform
				}
			]"
		>
			<view class="view-content">
				<view class="share-header">
					<text class="title">安全验证</text>
					<text class="refresh">刷新</text>
				</view>
				<view class="share-list">
					<image src="" mode=""></image>
					<text class="vc-img-load" v-show="img_loading">{{img_loading_text}}</text>
				</view>
				<view class="vc-bottom">
					<view class="vc-msg">
						请点击上图中的：
					</view>
					<view class="vc-small">
						<image src="" mode=""></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			transform: 'translateY(50vh)',
			timer: 0,
			backgroundColor: 'rgba(0,0,0,0)',
			show: false,
			config: {},
			img_loading:true,
			img_loading_text:'正在加载...'
		};
	},
	props: {
		contentHeight: {
			type: Number,
			default: 0
		},
		//是否是tabbar页面
		hasTabbar: {
			type: Boolean,
			default: false
		}
	},
	created() {
		const height = uni.upx2px(this.contentHeight) + 'px';
		this.config = {
			height: height,
			transform: `translateY(${height})`,
			backgroundColor: 'rgba(0,0,0,.4)'
		};
		this.transform = this.config.transform;
	},
	methods: {
		toggleMask() {
			//防止高频点击
			if (this.timer == 1) {
				return;
			}
			this.timer = 1;
			setTimeout(() => {
				this.timer = 0;
			}, 500);

			if (this.show) {
				this.transform = this.config.transform;
				this.backgroundColor = 'rgba(0,0,0,0)';
				setTimeout(() => {
					this.show = false;
					this.hasTabbar && uni.showTabBar();
				}, 200);
				return;
			}

			this.show = true;
			//等待mask重绘完成执行
			if (this.hasTabbar) {
				uni.hideTabBar({
					success: () => {
						setTimeout(() => {
							this.backgroundColor = this.config.backgroundColor;
							this.transform = 'translateY(-80px)';
						}, 10);
					}
				});
			} else {
				setTimeout(() => {
					this.backgroundColor = this.config.backgroundColor;
					this.transform = 'translateY(-80px)';
				}, 10);
			}
			
			
		},
		getVercodeimage(phone){
			let that =this
			that.img_loading_text = "正在加载..."
			this.$request.get('',{
				data:{
					
				}
			}).then(res=>{
				that.img_loading = false
				let result = res.data;
				if(result.Status=='ok'){
					
					
					
				}else that.img_loading_text = "请求失败，请刷新"
			}).catch(error=>{
				that.img_loading = false
				that.img_loading_text = "请求失败，请刷新"
			})
		},
	}
};
</script>

<style lang="scss">
.mask {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 998;
	transition: 0.3s;
	.bottom {
		position: absolute;
		left: 0;
		bottom: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 90upx;
		background: #fff;
		z-index: 9;
		font-size: 2upx;
	}
}

.mask-content {
	width: 84%;
	transition: 0.3s;
	background: #fff;
	border-radius: 10upx;
	padding: 0 20upx;
	&.has-bottom {
		padding-bottom: 90upx;
	}
	.view-content {
		height: 100%;
	}
}
.share-header {
	height: 90upx;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 90upx;
	.title {
		font-size: 34upx;
	}
	.refresh {
		font-size: 30upx;
		color: #d19933;
		position: absolute;
		right: 20upx;
	}
}
.share-list {
	position: relative;
	padding-top: 60%;
	image {
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		border-width: 0;
		border: none;
	}
	.vc-img-load {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		max-width: 50%;
		text-align: center;
		color: #bfbfbf;
	}
}
.vc-bottom {
	padding: 20upx 0;
	display: flex;
	align-content: left;
	.vc-msg{
		line-height: 80upx;
		font-size: 30upx;
		color: #333;
	}
	.vc-small{
		height:80upx;
		width: 90upx;
		image{
			width: 100%;
			height: 100%;
		}
	}
}
</style>
